export default function useBaseBarLineChartOption() {

    const setMyChartOptionData = (seriesOption) => {
        return {
            backgroundColor: 'rgba(11,32,53,0)',
            textStyle: {
                color: '#FFFFFF',
                opacity: 0.85
            },
            title: {
                // text: '世界港口集装箱吞吐量排名',
                text: seriesOption.value.titleText,
                textStyle: {
                    color: '#38E5DE',
                    fontSize: '26px',
                    opacity: 1
                },
                subtext: seriesOption.value.subText,
                subtextStyle: {
                    color: '#ff6666',
                    fontSize: '16px',
                    opacity: 1
                }
                // subtext: '数据来自网络'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                },
                textStyle: {
                    fontSize: 16
                }
            },
            legend: {
                show: true,
                data: seriesOption.value.legendData,
                top: 'bottom',
                itemWidth: 20,
                textStyle: {
                    fontSize: 16,
                    color: '#FFFFFF',
                    opacity: 0.85
                }
            },
            grid: {
                left: '5%',
                right: '5%',
                bottom: '8%',
                top: '100',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: seriesOption.value.xAxisData,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        interval: 0
                    }
                },
            ],
            yAxis: [
                {
                    type: 'value',
                    name: seriesOption.value.yAxisName[0],
                    axisLabel: {
                        formatter: '{value}'
                    },
                    nameTextStyle: {
                        align: "center",
                        fontSize: 16
                    }
                },
                {
                    type: 'value',
                    name: seriesOption.value.yAxisName[1],
                    position: 'right',
                    axisLabel: {
                        formatter: '{value} %'
                    },
                    axisPointer: {
                        type: "line"
                    },
                    nameTextStyle: {
                        fontSize: 16
                    }
                }
            ],
            dataZoom: [{
                type: "inside"
            }],
            series: seriesOption.value.seriesArray
        };
    }

    return {
        setMyChartOptionData
    }
}